<template>
  <div>
    <div class="container-fluid">
      <el-row class="spannel_list" :gutter="20">
        <el-col :span="6">
          <div class="spannel">
            <em>10015</em><span>篇</span>
            <b>总文章数</b>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="spannel scolor01">
            <em>123</em><span>篇</span>
            <b>日新增文章数</b>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="spannel scolor02">
            <em>35</em><span>条</span>
            <b>评论总数</b>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="spannel scolor03">
            <em>123</em><span>条</span>
            <b>日新增评论数</b>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="container-fluid">
        <el-row class="curve-pie">
            <el-col :span="16">
                <div class="gragh_pannel" id="curve_show"></div>
            </el-col>
            <el-col :span="8">
                <div class="gragh_pannel" id="pie_show"></div>
            </el-col>
        </el-row>
    </div>

    <div class="container-fluid">
      <div class="column_pannel" id="column_show"></div>
    </div>
  </div>
</template>

<script>
//导入echarts
import * as echarts from 'echarts'
export default {
  name: 'mainCount',
  data () {
    return {}
  },
  mounted () {
    {
      let json =
        '{"code":200,"msg":"获取成功","date":[{"date":"2019-05-20","count":23},{"date":"2019-05-21","count":19},{"date":"2019-05-22","count":29},{"date":"2019-05-23","count":24},{"date":"2019-05-24","count":28},{"date":"2019-05-25","count":28},{"date":"2019-05-26","count":19},{"date":"2019-05-27","count":25},{"date":"2019-05-28","count":25}]}'
      let obj = JSON.parse(json)
      loadEchars(obj)

      function loadEchars (obj) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('curve_show'))

        let data = []
        let date = []
        for (let i = 0; i < obj.date.length; i++) {
          data.push(obj.date[i].count)
          date.push(obj.date[i].date)
        }

        let option = {
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%']
            }
          },
          title: {
            left: 'center',
            text: '月新增文章数'
          },

          xAxis: {
            name: '日',
            type: 'category',
            boundaryGap: false,
            data: date
          },
          legend: {
            data: ['新增文章'],
            top: '40'
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            },
            right: 50
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
          },
          series: [
            {
              name: '新增文章',
              type: 'line',
              smooth: true,
              // symbol: 'none',
              sampling: 'average',
              itemStyle: {
                color: '#f80'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(255,136,0,0.39)'
                  },
                  {
                    offset: 0.34,
                    color: 'rgba(255,180,0,0.25)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,222,0,0.00)'
                  }
                ])
              },
              data: data
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }
    }

    {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('pie_show'))

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '分类文章数量比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          data: ['爱生活', '爱代码', '爱保健', '爱美食', '爱电影'],
          top: 30
        },
        color: ['#22ffff', '#203040', '#ffff00', '#00ff00', '#ee2066'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            data: [
              { value: 335, name: '爱生活' },
              { value: 310, name: '爱代码' },
              { value: 234, name: '爱保健' },
              { value: 235, name: '爱美食' },
              { value: 348, name: '爱电影' }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }

    {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('column_show'))

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '分类访问量',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        color: ['#22ffff', '#203040', '#ffff00', '#00ff00', '#ee2066'],
        legend: {
          data: ['爱生活', '爱代码', '爱保健', '爱美食', '爱电影'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '爱生活',
            type: 'bar',
            data: [320, 332, 301, 334]
          },
          {
            name: '爱代码',
            type: 'bar',
            data: [120, 132, 101, 134]
          },
          {
            name: '爱保健',
            type: 'bar',
            data: [220, 182, 191, 234]
          },
          {
            name: '爱美食',
            type: 'bar',
            data: [150, 232, 201, 154]
          },
          {
            name: '爱电影',
            type: 'bar',
            data: [362, 218, 364, 326]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style></style>
